<template>
  <div class="menu">
    <el-card style="width:98%;margin:30px auto;">
      <div clas="title" style="font-weight:bold;font-size:17px">菜单管理</div>

      <div style="display: flex;justify-content: space-between">

        <div style="margin: 20px 2px">
          <el-button type="primary" icon="el-icon-plus" circle @click="handleAdd(null)" title="新增菜单"></el-button>
          <el-button type="danger" @click="delBatch" icon="el-icon-delete" title="批量删除" slot="reference"
                     style="margin-left: 10px"></el-button>

        </div>

    <div style="margin: 20px 5px">
      <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
      <el-button class="ml-5" type="primary" @click="load" style="margin-left: 10px">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>


      </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
              row-key="id" type="expand"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <!--<el-table-column prop="id" label="ID" width="80"></el-table-column>-->
      <el-table-column prop="name"   label="名称"></el-table-column>
      <el-table-column prop="path" label="路径"></el-table-column>
      <el-table-column prop="pagePath" label="页面路径"></el-table-column>
      <el-table-column label="图标" class-name="fontSize18" align="center" label-class-name="fontSize12">
        <template slot-scope="scope">
          <span :class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column prop="sortNum" label="顺序"></el-table-column>
      <el-table-column label="操作"  width="300" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-plus" circle @click="handleAdd(scope.row.id)" v-if="!scope.row.pid && !scope.row.path" title="新增子菜单"></el-button>
          <el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" circle></el-button>
          <el-button @click="del(scope.row.id)" title="删除"
                     slot="reference" type="danger" icon="el-icon-delete" circle
                     style="margin-left: 10px"></el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-card>


    <el-dialog title="菜单信息" :visible.sync="dialogFormVisible"  :destroy-on-close="true">
      <el-form label-width="80px" size="small"  :rules="rules" ref="form"  :model="form">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路径" >
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="页面路径" >
          <el-input v-model="form.pagePath" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.value">
              <i :class="item.value" /> {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顺序">
          <el-input v-model="form.sortNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


  export default {
    name: "Menu",
    data() {
      return {
        tableData: [],
        total: 0,
        pageNum: 1,
        pageSize: 10,
        name: "",
        form: {},
        dialogFormVisible: false,
        multipleSelection: [],
        options: [],
        rules: {
          name: [
            {required: true, message: '请输入菜单名称', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到 15 个字符', trigger: 'blur'}
          ],
          path: [
            {required: true, message: '请输入路径', trigger: 'blur'},
            {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
          ],
          pagePath: [
            {required: true, message: '请输入页面路径', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
          ],
          icon: [
            {required: true, message: '请选择icon', trigger: 'blur'},
          ],
        },
      }
    },
    created() {
      this.load()
    },
    methods: {
      load() {
        this.request.get("/menu", {
          params: {
            name: this.name,
          }
        }).then(res => {
          this.tableData = res.data
        })

        // 请求图标的数据
        this.request.get("/menu/icons").then(res => {
          this.options = res.data
        })
      },


      //消除校验
      resetForm() {
        this.$nextTick(()=>{
          this.$refs.form.resetFields();
        })

        this.dialogFormVisible=false

      },

      save() {

        this.$refs['form'].validate((valid) => {
          if (valid) {  // 表单校验合法
            this.request.post("/menu", this.form).then(res => {
              if (res.code === 200) {
                this.$message.success("保存成功")
                this.dialogFormVisible = false
                this.load()
              } else {
                this.$message.error("保存失败")
              }
            })
          }})

      },
      handleAdd(pid) {
        this.dialogFormVisible = true
        this.form = {}
        if (pid) {
          this.form.pid = pid
        }
      },
      handleEdit(row) {
        this.form = JSON.parse(JSON.stringify(row))
        this.dialogFormVisible = true
      },
      del(id) {

        this.$confirm('你确定要删除,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'msgbox',
          type: 'warning'
        }).then(async () => {
          this.request.delete("/menu/" + id).then(res => {
            if (res.code === 200) {
              this.$message.success("删除成功")
              this.load()
            } else {
              this.$message.error("删除失败")
            }
          })
        }).catch(() => {
          this.$message({
            message: '已取消删除',
            type: 'success'
          })
        })

      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      delBatch() {
        this.$confirm('你确定要批量删除,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'msgbox',
          type: 'warning'
        }).then(async () => {
          let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
          this.request.post("/menu/del/batch", ids).then(res => {

            if (ids.length===0) {
              this.$message({
                type: 'warning',
                message: '请选择数据!'
              });
              return
            }
            if (res.code === 200) {
              this.$message.success("批量删除成功")
              this.load()
            } else {
              this.$message.error("批量删除失败")
            }
          })
        }).catch(() => {
          this.$message({
            message: '已取消删除',
            type: 'success'
          })
        })
      },
      reset() {
        this.name = ""
        this.load()
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
        this.pageNum = pageNum
        this.load()
      }

    }
  }
</script>


<style lang="scss" scope>
  .menu{
    .headerBg {
      background: #eee!important;
    }
    .fontSize18{
      font-size: 18px;
    }
    .fontSize12{
      font-size: 12px;
    }

    .el-dialog {
      width: 30%;
    }


    @media screen and (max-width: 440px) {
      .el-dialog {
        width: 90%;
      }

      @media only screen and (min-width: 600px) and (max-width: 1200px) {
        .el-dialog {
          width: 60%;
        }
      }

      @media only screen and (min-width: 441px) and (max-width: 599px) {
        .el-dialog {
          width: 80%;
        }
      }
    }
  }
</style>
<style >

@media (max-width: 720px) {
  .msgbox{
    width: 327px !important;
  }
}

</style>
